<template>
  <div class="first">
    <div class="logo">
      <img src="/static/images/logo.png" alt="">
    </div>
    <p class="welcome">准备开始了吗?</p>
    <button class="go" @click="goNext">GO!</button>
    <footer>
      <span>已在使用公益联盟？</span>
      <router-link to="/home">直接登录>></router-link>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'tutorialFirst',
  data () {
    return {
    }
  },
  methods: {
    goNext () {
      this.$router.push({
        name: 'tutorialSecond'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.first {
	width: 100%;
	height: 100%;
	background-image: linear-gradient(180deg, 
		#ffddb4 0%, 
		#9ea3b9 53%, 
		#3d68be 100%), 
	linear-gradient(
		#44cef6, 
		#44cef6);
	background-blend-mode: normal, 
		normal;
}
.logo {
  width: 300px;
  height: 300px;
  padding-top: 270px;
  margin: 0 auto;
  img {
    width: 300px;
    height: 300px;
  }
}
.welcome {
  font-size: 40px;
  color: #fff;
  text-align: center;
  margin-top: 40px;
}
.go {
  display: block;
  margin: 0 auto;
  margin-top: 190px;
  height: 140px;
  width: 240px;
  background-color: #fff;
  border-radius: 10px;
  font-size: 60px;
  color: #808080;
}
footer {
  position: fixed;
  bottom: 43px;
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 26px;
  a {
    color: #fff;
    font-weight: bolder;
  }
}
</style>

